<template>
  <div>
    <el-card shadow="never" class="box-card">
      <div slot="header" class="clearfix">
        <el-upload
          style="width: 680px; margin-left: 0px"
          action="http://localhost:9528/lejuAdmin/material/uploadFileOssSave"
          :headers="headers"
          ref="upload1"
          :on-success="uploadSuccess"
        >
          <el-button size="small" type="primary">点击上传素材</el-button>
          <span style="margin-left: 10px" slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </span>
        </el-upload>
      </div>
      <div class="cons text item">
        <el-card
          style="width:300px;margin-top: 20px"
          v-for="item in datalist"
          shadow='hover'
          :key="item.id"
          class="box-card1"
        >
          <div slot="header" class="clearfix">
            <span style="font-size: 12px">创建时间: {{ item.createTime }}</span>
          </div>
          <div class="text item">
            <el-image
              style="width: 258px; height: 200px"
              :src="item.ossUrl"
            ></el-image>
            <el-button
              @click="del(item.id)"
              class="btn"
              size="small"
              type="danger"
              >删除</el-button
            >
          </div>
        </el-card>
        <div class="box-card1 one"></div>
        <div class="box-card1 one"></div>
        <div class="box-card1 one"></div>
      </div>

      <pagination
        @limitfather="limitchange"
        @startfather="startchange"
        :totalNumber="totalnumber"
      ></pagination>
    </el-card>
  </div>
</template>

<script>
import materialApi from "@/api/material";
import { getToken } from "@/utils/myAuth";
import pagination from "@/components/common/pagination";
import articleApi from "@/api/article";
export default {
  components: {pagination},

  data() {
    return {
      fileList: [],
      start: 1,
      limit: 10,
      datalist: [],
      totalnumber: 0,
    };
  },

  created() {
    this.init();
  },

  mounted() {},

  methods: {
        // 来自子组件切换limit
    limitchange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 来自子组件切换start
    startchange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },
    // 删除素材
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(id);
        articleApi.delMaterial(id).then((res) => {
          console.log(res);
          if (res.success) {
            this.$message.success("删除成功");
            this.init();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    // 素材上传
    uploadSuccess(res, file) {
      console.log(res);
      if (res.success) {
        articleApi.uploadFileOss;
        this.imageUrl = res.data.fileUrl;
        this.$refs.upload1.clearFiles();
        this.$forceUpdate();
        this.init();
      } else {
        this.$message.error(res.message);
      }
      console.log(res);
      this.form.coverImg = res.data.fileUrl;
    },
    // 获取数据列表
    init() {
      materialApi.findMaterialByPage(this.start, this.limit).then((res) => {
        console.log(res);
        this.datalist = res.data.rows;
        this.totalnumber = res.data.total;
      });
    },
    // 切换每页显示多少个
    handleSizeChange(e) {
      console.log(e);
      this.limit = e;
      this.init();
    },
    // 切换页码
    handleCurrentChange(e) {
      console.log(e);
      this.start = e;
      this.init();
    },
    currentPage2(e) {
      console.log(e);
    },
  },

  computed: {
    headers() {
      const token = getToken();
      return { token };
    },
  },

  watch: {},
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 97%;
  margin: 15px auto;
}
.box-card1 {
  width: 300px;
  height: 350px;
}
.cons {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: -20px;
}
.btn {
  width: 200px;
  position: relative;
  bottom: -20px;
  left: 30px;
}
.one{
  height: 0;
}
</style>